<template>
  <layout title="scrollList滚动列表">
    <layout-content title="基础使用">
      <tn-scroll-list>
        <view class="tn-flex-row">
          <view
            v-for="(item, index) in 14"
            :key="index"
            class="scroll-list-container tn-flex-column tn-flex-center"
          >
            <view class="icon tn-flex-center tn-cool-bg-image" :class="[getRandomColorClass('cool-bg')]">
              <tn-icon icon="gloves-fill"></tn-icon>
            </view>
            <view class="title">北北</view>
          </view>
        </view>
      </tn-scroll-list>
    </layout-content>

    <layout-content title="隐藏指示器">
      <tn-scroll-list :indicator="false">
        <view class="tn-flex-row">
          <view
            v-for="(item, index) in 14"
            :key="index"
            class="scroll-list-container tn-flex-column tn-flex-center"
          >
            <view class="icon tn-flex-center tn-cool-bg-image" :class="[getRandomColorClass('cool-bg')]">
              <tn-icon icon="gloves-fill"></tn-icon>
            </view>
            <view class="title">北北</view>
          </view>
        </view>
      </tn-scroll-list>
    </layout-content>

    <layout-content title="设置指示器样式">
      <tn-scroll-list indicator-width="100" indicator-bar-width="30" indicator-color="#E6E6E6" indicatorbar-color="tn-bg-red">
        <view class="tn-flex-row">
          <view
            v-for="(item, index) in 14"
            :key="index"
            class="scroll-list-container tn-flex-column tn-flex-center"
          >
            <view class="icon tn-flex-center tn-cool-bg-image" :class="[getRandomColorClass('cool-bg')]">
              <tn-icon icon="gloves-fill"></tn-icon>
            </view>
            <view class="title">北北</view>
          </view>
        </view>
      </tn-scroll-list>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnScrollList from '@/tuniao-ui/components/tn-scroll-list/src/ScrollList.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import { getRandomColorClass } from '@/tuniao-ui/utils'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>
.scroll-list-container {

  .icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    font-size: 60rpx;
    margin: 20rpx;
  }
}
</style>
